<template>
	<div class="w750 white-bg overflow-y">
		<div class="p-1">
			<div class="flex-start mt-1" v-for="(item, index) in contactList" :key="item.id">
				<legend-image :pic="item.serviceUrl" className="w-50p h-50p rounded-4 mr-1" />
				<div class="bg-bg rounded-10 p-1 font-14 line-h-md flex-1">
					<div>{{ item.serviceName }}</div>
					<div class="word-breakall" v-html="handleMark(item.details)"></div>
				</div>
			</div>
		</div>
		<Noempty :pic="require('../../assets/images/ser-order.png')" :title="'暂无客服'" v-if="Nomsg" />
	</div>
</template>

<script>
import { getContactList } from "api/common/common";
import Noempty from 'components/Noempty/Noempty'
import legendImage from 'components/legendImage/legendImage'
import { mapState } from 'vuex';
export default {
	data() {
		return {
			Nomsg: false,
			contactList: []
		};
	},
	mounted() {
		this.getContactList()
	},
	methods: {
		getContactList() {
			getContactList().then( res => {
			    if (res.status == 1) {
			        if (res.result) {
			            this.contactList = res.result.floatWinItemBOS
			        } else {
			            this.Nomsg = true
			        }
			    }
			})
		}
	},
	computed: {
		...mapState(['themes']),
		// 将换行符和空格转为指定符号
		handleMark(details) {
			return function(details) {
				if(!details) return
				return details.replace(/\n/g,"</br>").replace(/\s/g,"&nbsp;")
			}
		}
	},
	components: {
		Noempty,
		legendImage
	}
};
</script>
